import React, { useEffect, useState } from "react";
import AddWorkMenu from "@/layouts/components/AddWorkMenu";
import { Button, Row, Col, Collapse } from "antd";
import { useNavigate } from "react-router-dom";
import ys from "@/assets/images/ys.png";
import ys_selected from "@/assets/images/ys_selected.png";
import menu_add from "@/assets/images/menu_add.png";
import left from "@/assets/images/left.png";
import right from "@/assets/images/right.png";
import menu_search from "@/assets/images/menu_search.png";
import "./index.less";

// 定义Props接口
interface ParentProps {
  menuData: any;
  subId: string;
  sendAbbreviate: (childData: any) => void;
}
function getRandomData(arr: any, size: any) {
  // 对原数组进行浅拷贝，以免修改原数组
  const arrayCopy = [...arr];
  // 使用sort方法打乱数组顺序
  arrayCopy.sort(() => 0.5 - Math.random());
  // 返回打乱后数组的前10条数据
  return arrayCopy.slice(0, size);
}

function flattenTree(tree: any, result: any = []) {
  for (const node of tree) {
    result.push(node);
    if (node.children && node.children.length > 0) {
      flattenTree(node.children, result);
    }
  }
  return result;
}
const SubMenu: React.FC<ParentProps> = ({ menuData, sendAbbreviate, subId }) => {
  const [usedList, setUsedList] = useState<any[]>([]);
  const [usedActiveIndex, setUsedActiveIndex] = useState(-1);
  const [abbreviate, setAbbreviate] = useState(false);
  const [addMenuModelShow, setAddMenuModelShow] = useState(false);

  const navigate = useNavigate();
  const updateIsShow = (newValue: boolean | ((prevState: boolean) => boolean)) => {
    setAddMenuModelShow(newValue);
  };
  useEffect(() => {
    setUsedList(getRandomData(flattenTree(menuData), 13));
  }, [menuData]);
  function handleUsedMenu(index: number) {
    setUsedActiveIndex(index);
  }
  function handleMenuClick(item: any, index: number) {
    console.log(item, index);
    const menuList = [
      {
        url: "/wujie/ys/ndysbz/index",
        val: "年度预算编制"
      },
      {
        url: "/wujie/ys/ndyscx/index",
        val: "年度预算查询"
      },
      {
        url: "/wujie/ys/yssbzt/index",
        val: "预算上报状态"
      },
      {
        url: "/wujie/ys/ydsubz/index",
        val: "月度预算编制"
      },
      {
        url: "/wujie/ys/ydyscx/index",
        val: "月度预算查询"
      },
      {
        url: "/wujie/ys/gzwysbz/index",
        val: "国资委预算编制"
      },
      {
        url: "/wujie/ys/bbzygl/index",
        val: "报表资源管理"
      },
      {
        url: "/wujie/ys/dwbhbb/index",
        val: "单位包含报表"
      },
      {
        url: "/wujie/ys/dwbhmx/index",
        val: "单位包含模型"
      },
      {
        url: "/wujie/sw/nsztjcxxtj/index",
        val: "纳税主体基础信息统计"
      },
      {
        url: "/wujie/sw/swrydjxx/index",
        val: "税务人员登记信息"
      },
      {
        url: "/wujie/sw/sbszrdsx/index",
        val: "申报税（费）种认定事项"
      },
      {
        url: "/wujie/sw/tbszrdsx/index",
        val: "填报税（费）种认定事项"
      },
      {
        url: "/wujie/sw/cszcsy/index",
        val: "财税政策收益及减税降费统计表"
      },
      {
        url: "/wujie/sw/gxjsqysds/index",
        val: "高新技术企业企业所得税税率优惠"
      },
      {
        url: "/wujie/sw/jnjsqktj/index",
        val: "境内缴税情况统计"
      },
      {
        url: "/wujie/sw/zzsmxb/index",
        val: "增值税明细表"
      },
      {
        url: "/wujie/sw/qysdsyjmx/index",
        val: "企业所得税预缴明细"
      },
      {
        url: "/wujie/sw/qysdshjmxb/index",
        val: "企业所得税汇缴明细表"
      },
      {
        url: "/wujie/sw/jwjsqktj/index",
        val: "境外缴税情况统计"
      },
      {
        url: "/wujie/sw/bsrl/index",
        val: "办税日历"
      },
      {
        url: "/wujie/sw/bsrlwh/index",
        val: "办税日历维护"
      },
      {
        url: "/wujie/sw/rwmb/index",
        val: "任务模板"
      },
      {
        url: "/wujie/sw/rwlbops/index",
        val: "任务列表【OSP】"
      },
      {
        url: "/wujie/sw/asztj/index",
        val: "按税种统计实缴税额"
      },
      {
        url: "/wujie/sw/adqtjsjse/index",
        val: "按地区统计实缴税额"
      },
      {
        url: "/wujie/sw/dfczgxtj/index",
        val: "地方财政贡献统计"
      },
      {
        url: "/wujie/sw/cszcsytj/index",
        val: "财税政策收益统计"
      },
      {
        url: "/wujie/sw/tbmxtj/index",
        val: "填报明细统计"
      },
      {
        url: "/wujie/sw/jnsfdwtj/index",
        val: "境内税费多维统计"
      },
      {
        url: "/wujie/sw/hsjsjtj/index",
        val: "海税局实缴税额统计"
      },
      {
        url: "/wujie/sw/ajgtjsjse/index",
        val: "按机构统计实缴税额"
      },
      {
        url: "/wujie/sw/jgxxtj/index",
        val: "机构信息统计"
      },
      {
        url: "/wujie/sw/jnzdcytj/index",
        val: "境内税费重大差异统计"
      },
      {
        url: "/wujie/sw/jssfzdtj/index",
        val: "境外税费重大差异统计"
      },
      {
        url: "/wujie/sw/jwagjsj/index",
        val: "境外按国家实缴税额统计"
      },
      {
        url: "/wujie/sw/jwsfdwtj/index",
        val: "境外税费多维分析"
      },
      {
        url: "/wujie/sw/nsjecx/index",
        val: "纳税净额查询"
      }
    ];
    menuList.forEach(value => {
      if (value.val === item.fullName) {
        item.path = value.url;
      }
    });
    console.log(menuList);
    // item.path = "/osp-tax-service" + item.urlAddress;
    navigate(item.path);
  }
  function handleAbbreviate() {
    setAbbreviate(!abbreviate);
    sendAbbreviate(!abbreviate);
  }
  const renderMenu = (data: any) => {
    return (
      <Row gutter={[8, 8]}>
        {data.map((item: any, index: number) => {
          return (
            <Col span={8} key={index}>
              <Button style={{ width: "100%", overflow: "hidden" }} onClick={handleMenuClick.bind(this, item, 1)}>
                {item.fullName}
              </Button>
            </Col>
          );
        })}
      </Row>
    );
  };
  const getCollapseItems = (data: any) => {
    return data.map((item: any) => {
      if (item.children && item.children.length <= 0) {
        return renderMenu(data);
      }
      return {
        key: `item-${item.id}`,
        label: item.fullName,
        style: { marginBottom: 12, background: "rgba(255, 255, 255, 0.6)", border: "none" },
        children: item.children ? renderMenu(item.children) : <div></div>
      };
    });
  };
  return (
    <div>
      <div className="menu-layout">
        {/* 常用菜单 */}
        <div className="used-menu">
          <div className={`used-menu-title ${abbreviate ? "used-menu-title-abbreviate" : ""}`}>
            <span>常用功能</span>
            <div className="used-right">
              {!abbreviate ? (
                <div className="used-icon">
                  <img src={menu_search} alt="" />
                  <div>搜索</div>
                </div>
              ) : (
                ""
              )}

              <div
                className="used-icon"
                onClick={() => {
                  setAddMenuModelShow(true);
                }}
              >
                <img src={menu_add} alt="" />
                {abbreviate ? "" : <div>添加</div>}
              </div>
              <div
                className="used-icon"
                onClick={() => {
                  handleAbbreviate();
                }}
              >
                <img src={abbreviate ? right : left} alt="" />
                {abbreviate ? "" : <div>收起</div>}
              </div>
            </div>
          </div>
          <div className={`used-menu-content ${abbreviate ? "used-menu-content-abbreviate" : ""}`}>
            {usedList.map((item: any, index) => {
              return (
                <div
                  className={`used-menu-item ${index === usedActiveIndex ? "used-menu-item-selected" : ""}`}
                  key={index}
                  onClick={() => {
                    handleUsedMenu(index);
                  }}
                >
                  <div className="used-menu-item-icon">
                    <img src={index === usedActiveIndex ? ys_selected : ys} />
                  </div>
                  <div className="used-menu-name">{item.fullName}</div>
                </div>
              );
            })}
          </div>
        </div>
        {/* 二级导航菜单 */}
        {abbreviate ? (
          ""
        ) : (
          <div className="sub-menu-content">
            <Collapse bordered={false} expandIconPosition="right" items={getCollapseItems(menuData)} />
          </div>
        )}
      </div>
      {/* 添加常用菜单 */}
      {addMenuModelShow ? <AddWorkMenu onChangeIsShow={updateIsShow} subId={subId} /> : ""}
    </div>
  );
};
export default SubMenu;
